<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common/header.jsp"%>
<link href="${pageContext.request.contextPath }/statics/AmazeUI-2.4.2/optstyle.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/statics/AmazeUI-2.4.2/style.css" rel="stylesheet" type="text/css" />
<b class="line"></b>
<div class="nav-table">
					   <div class="long-title"><span class="all-goods">全部分类</span></div>
					   <div class="nav-cont">
							<ul>
								<li class="index"><a href="${pageContext.request.contextPath }/index/index.do">首页</a></li>
                                <li class="qc"><a href="${pageContext.request.contextPath }/index/search?p_type=4">跟团游</a></li>
                                <li class="qc"><a href="${pageContext.request.contextPath }/index/search?p_type=2">酒店</a></li>
                                <li class="qc"><a href="${pageContext.request.contextPath }/index/search?p_type=1">门票</a></li>
							</ul>
						</div>	
			</div>
				<ol class="am-breadcrumb am-breadcrumb-slash">
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li class="am-active"></li>
				</ol>
				<!-- <script type="text/javascript">
					$(function() {});
					$(window).load(function() {
						$('.flexslider').flexslider({
							animation: "slide",
							start: function(slider) {
								$('body').removeClass('loading');
							}
						});
					});
				</script> -->
				<div class="scoll">
					<section class="slider">
						<div class="flexslider">
							<ul class="slides">
								<li>
									<img src="" title="pic" />
								</li>
								<li>
									<img src="../images/02.jpg" />
								</li>
								<li>
									<img src="../images/03.jpg" />
								</li>
							</ul>
						</div>
					</section>
				</div>

				<!--放大镜-->

				<div class="item-inform">
					<div class="clearfixLeft" id="clearcontent">

						<div class="box">
							<script type="text/javascript">
								$(document).ready(function() {
									/* $(".jqzoom").imagezoom();
									$("#thumblist li a").click(function() {
										$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
										$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
										$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
									}); */
									$("#thumblist li a").click(function() {
									$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
										$(".jqzoom").attr('src', $(this).find("img").attr("src"));
									});
								});
							</script>

							<div class="tb-booth tb-pic tb-s310">
								<img src="/pic/${product.org_PicPath}"  class="jqzoom" />
							</div>
							<ul class="tb-thumb" id="thumblist">
								<li class="tb-selected">
									<div class="tb-pic tb-s40">
										<a href="#">
										<img src="/pic/${product.pic_Path_1}">
										</a>
									</div>
								</li>
								<li>
									<div class="tb-pic tb-s40">
										<a href="#"><img src="/pic/${product.pic_Path_2}"></a>
									</div>
								</li>
								<li>
									<div class="tb-pic tb-s40">
										<a href="#"><img src="/pic/${product.pic_Path_3}"></a>
									</div>
								</li>
							</ul>
						</div>

						<div class="clear"></div>
					</div>

					<div class="clearfixRight">

						<!--规格属性-->
						<!--名称-->
						<div class="tb-detail-hd">
							<h1>	
							 ${product.p_Name}
	          			</h1>
						</div>
						<div class="tb-detail-list">
							<!--价格-->
							<%-- <div class="tb-detail-price">
								<li class="price iteminfo_price">
									<dt>由来价</dt>
									<dd><em>¥</em><b class="sys_item_price">${product.price}</b>  </dd>                   
								</li>
								<li class="price iteminfo_mktprice">
									<dt>原价</dt>
									<dd><em>¥</em><b class="sys_item_mktprice">${product.price+300 }</b></dd>									
								</li>
								<div class="clear"></div>
							</div>

							

							<!--销量-->
							<ul class="tm-ind-panel">
								<li class="tm-ind-item tm-ind-sellCount canClick">
									<div class="tm-indcon"><span class="tm-label">月出游人数</span><span class="tm-count">1015</span></div>
								</li>
								<li class="tm-ind-item tm-ind-sumCount canClick">
									<div class="tm-indcon"><span class="tm-label">累计出游人数</span><span class="tm-count">6015</span></div>
								</li>
								<li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
									<div class="tm-indcon"><span class="tm-label">累计评价</span><span class="tm-count">640</span></div>
								</li>
							</ul> --%>
							<div class="clear"></div>

							<!--各种规格-->
							<dl class="iteminfo_parameter sys_item_specpara">
								<dt class="theme-login"><div class="cart-title">可选规格<span class="am-icon-angle-right"></span></div></dt>
								<dd>
									<!--操作页面-->

									<div class="theme-popover-mask"></div>

									<div class="theme-popover">
										<div class="theme-span"></div>
										<div class="theme-poptit">
											<a href="javascript:;" title="关闭" class="close">×</a>
										</div>
										<div class="theme-popbod dform">
											<form class="theme-signin" name="loginform" id="loginform" action="${pageContext.request.contextPath }/index/hotelroom" method="post">
												<input type="hidden" id="hotelName" name="hotelName" value="${product.p_Name}"/>
												<input type="hidden" name="id" value="${product.id}"/>
												<div class="theme-signin-left">
													<div class="theme-options">
														<div class="cart-title">酒店地址 </div>
														<input type="hidden" value="${product.address}" name="address"/>
														<input type="hidden" value="${product.createBy}" name="p_createBy"/>
														<ul>
															<li class="sku-line">
																${product.address}
															</li>
														</ul>
													</div>
													<div class="theme-options">
														<div class="cart-title">使用时间 </div>
														<ul>
															<li class="sku-line">
											                    <input type="text" Class="Wdate" id="usingDate" name="usingDate"  value=""
																readonly="readonly" onclick="WdatePicker();" />
															</li>
															<a class="btn" href="javascript:;" id="select">查询剩余房间</a>
														</ul> 
													</div>
													<div class="theme-options">
														<!-- <div class="cart-title number">数量</div>
														<dd>
															<input id="min" class="am-btn am-btn-default" name="" type="button" value="-" />
															<input id="text_box" name="count" type="text" value="1" style="width:30px;" />
															<input id="add" class="am-btn am-btn-default" name="" type="button" value="+" />
														</dd> -->
													</div>
													<div class="clear"></div>
													</div>
											</form>
										</div>
									</div>

								</dd>
							</dl>
							<div class="clear"></div>
							
						</div>

						<div class="pay">
							<li>
								<div class="clearfix tb-btn tb-btn-buy ">
									<a type="submit" id="LikBuy" title="点此按钮到下一步确认购买信息" href="javascript:;">单人房</a><span id="peo" judge=""></span>
								</div>
								
							</li>
							<li>
								<div class="clearfix tb-btn tb-btn-buy theme-login">
								<a type="submit" id="LikBuy1" title="点此按钮到下一步确认购买信息" href="javascript:;">双人房</a><span id="peo1" value=""></span>
								</div>
							</li>
						</div>

					</div>

					<div class="clear"></div>

				</div>

								</div>

							</div>

						</div>

						<div class="clear"></div>

						<div class="footer">
							<div class="footer-hd">
								<p>
									<a href="#">商城首页</a>
									<b>|</b>
									<a href="#">支付宝</a>
									<b>|</b>
									<a href="#">物流</a>
								</p>
							</div>
						</div>
					</div>

				</div>
			</div>
<%@include file="common/footer.jsp"%>
<script type="text/javascript">
	var add = $("#add");
	var min = $("#min");
	add.on("click",function(){
		var input = $("#Stock").val();
		input--;
		$("#Stock").val(input);
	});
	min.on("click",function(){
		var input = $("#Stock").val();
		input++;
		$("#Stock").val(input);
	});
	
	$("#LikBuy").on("click",function(){
		var usingDate = $("#usingDate").val();
		var peo = $("#peo").val();
		
		if(usingDate == null || usingDate == ""){
			alert("请填写日期!!!!")
			return false;
		}else{
			if(peo == null || peo == ""){
				alert("很抱歉!!!已经没有房间!!!");
				return false;
			}else{
				$("#loginform").attr("action","/Trip/index/hotelroom?roomName=单人房");
				$("#loginform").submit();
			}
		}
	});
	$("#LikBuy1").on("click",function(){
		var usingDate = $("#usingDate").val();
		var peo = $("#peo1").val();
		if(usingDate == null || usingDate == ""){
			
			alert("请填写日期!!!!")
			return false;
		}else{
			if(peo == null || peo == ""){
				alert("很抱歉!!!已经没有房间!!!");
				return false;
			}else{
				$("#loginform").attr("action","/Trip/index/hotelroom?roomName=双人房");
				$("#loginform").submit();
			}
		}
	});
	
	$("#select").on("click",function(){
		var _hotelName =$("#hotelName").val();
		var _usingDate = $("#usingDate").val();
		var peo = $("#peo");
		var peo1 = $("#peo1");
		if(_usingDate == null || _usingDate == ""){
			alert("请填写入住日期!!!");
			return false;
			
		}else{
			$.ajax({
				url : "/Trip/index/selectroom",
				data : {hotelName:_hotelName,usingDate:_usingDate},
				dataType : "json",
				type : "POST",
				success : function(data){
					if(data == null){
						peo.html("剩余: 0 间");
						peo1.html("剩余: 0 间");
						peo.val("");
						peo1.val("");
					}else{
						peo.html("剩余: "+data[0].rest+" 间");
						peo1.html("剩余: "+data[1].rest+" 间");
						peo.val(data[0].rest);
						peo1.val(data[1].rest);
					}
					
				}
			});
		}
	});
	
</script>


